<!--
* Licensed to the Apache Software Foundation (ASF) under one
* or more contributor license agreements.  See the NOTICE file
* distributed with this work for additional information
* regarding copyright ownership.  The ASF licenses this file
* to you under the Apache License, Version 2.0 (the
* "License"); you may not use this file except in compliance
* with the License.  You may obtain a copy of the License at
*
*     http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
-->

<div class="users-pane views-list-table">
    <div class="clearfix">
        <ol class="breadcrumb pull-left">
            <li class="active">{{'common.views' | translate}}</li>
            <button ng-click="reloadViews()"
                    class="btn btn-xs">
                <i class="glyphicon glyphicon-refresh"></i>
            </button>
        </ol>
        <div class="pull-right col-sm-4">
            <div class="input-group search-container">
                <input type="text" class="form-control search-input" placeholder="{{'common.search' | translate}}" ng-model="viewsFilter" ng-change="getFilteredViews()">
                <button type="button" class="close clear-search" ng-show="viewsFilter" ng-click="viewsFilter=''; getFilteredViews()"><span aria-hidden="true">&times;</span><span class="sr-only">{{"common.controls.close" | translate}}</span></button>
        <span class="input-group-addon">
          <span class="glyphicon glyphicon-search"></span>
        </span>
            </div>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-sm-3 padding-left-30"><h4>{{'views.viewName' | translate}}</h4></div>
        <div class="col-sm-3"><h4>{{'views.instances' | translate}}</h4></div>
        <div class="col-sm-6"><h4></h4></div>
    </div>
    <accordion close-others="false">
        <accordion-group ng-repeat="view in filteredViews" is-open="view.isOpened">
            <accordion-heading>
                <div class="row">
                    <div class="col-sm-4">
                        <i class="glyphicon glyphicon-chevron-right" ng-class="{'opened': view.isOpened}"></i>
                        {{view.view_name}}
                    </div>
                    <div class="col-sm-3">
            <span ng-repeat="(version, vData) in view.versions">
              {{version}}
                <span ng-switch="vData.status">
                  <span ng-switch-when="PENDING" class="viewstatus pending" ng-switch-when="true" tooltip="{{'views.pending' | translate}}"></span>
                  <div class="viewstatus deploying" ng-switch-when="DEPLOYING" tooltip="{{'views.deploying' | translate}}">
                      <div class="rect1"></div>
                      <div class="rect2"></div>
                      <div class="rect3"></div>
                  </div>
                  <span ng-switch-when="DEPLOYED">({{vData.count}})</span>
                  <span ng-switch-when="ERROR" tooltip="{{'views.alerts.deployError' | translate}}"><i class="fa fa-exclamation-triangle"></i></span>
                </span>
              {{$last ? '' : ', '}}
            </span>
                    </div>
                    <div class="col-sm-6">{{view.description}}</div>
                </div>
            </accordion-heading>
            <table class="table instances-table">
                <tbody>
                <tr ng-repeat="instance in view.instances">
                    <td class="col-sm-1"></td>
                    <td class="col-sm-5">
                        <a href="#/views/{{view.view_name}}/versions/{{instance.ViewInstanceInfo.version}}/instances/{{instance.ViewInstanceInfo.instance_name}}/edit" class="instance-link">{{instance.label}}</a>
                    </td>
                    <td class="col-sm-5">{{instance.ViewInstanceInfo.version}}</td>
                    <td class="col-sm-5 " ><div class="description-column" tooltip="{{instance.ViewInstanceInfo.description}}">{{instance.ViewInstanceInfo.description || 'No description'}}</div>
                    </td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td class="col-sm-4"></td>
                    <td class="col-sm-3 padding-left-30">
                        <a tooltip="{{view.canCreateInstance ? '' : constants.unable}}" class="btn btn-default createisntance-btn {{view.canCreateInstance ? '' : 'disabled'}}" href ng-click="gotoCreate(view.view_name, view.canCreateInstance);"><span class="glyphicon glyphicon-plus"></span> {{'views.create' | translate}}</a>
                    </td>
                    <td class="col-sm-3"></td>
                    <td class="col-sm-3">
                    </td>
                </tr>
                </tfoot>
            </table>
        </accordion-group>
        <div class="alert alert-info" ng-show="views && !filteredViews.length">
            {{'common.alerts.nothingToDisplay' | translate: '{term: constants.views}'}}
        </div>

    </accordion>
</div>
